<template>
  <a-back-top visibilityHeight="400"/>
  <div class="mainClass">
    <div class="oneClass">
      <div class="CardClass" v-for="(item , index) in respnseData" :key="item">
        <img :src="item.showLargerVersion" class="imgCardClass" :class="index%2 == 0 ? 'imgCardClass' : 'imgCardClassRight' "/>
        <div class="textCardClass">
          <div class="spanClass">{{ item.emName }}</div>
          <div class="spanClass1">{{ item.brief }}</div>
          <a-button type="primary" class="buttonClass" @click="findDetails(item)">
            了解详情
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref, toRaw} from "vue";
import {homeRecommendation} from "@/api/module/experiment";
import router from "@/route";

export default {
  name: "rankingList",
  setup() {
    const imgSrc = "http://192.168.0.145:9292/resource/resource/2022/06/10/30e532e0-9931-45ef-ba5f-59b50eaaaaf5.png";
    const projectImg = "http://192.168.0.145:9292/resource/resource/2022/06/10/1655081903736.jpg";
    const respnseData = ref([
      {
        "id": 210,
        "productName": "VR农业思政",
        "lookNumber": 50,
        "collectNumber": 0,
        "grade": "1",
        "showImgUrl": "https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/03/21/d2bfc0f438db4f3e81d7f46350c8490dpng",
        "productSynopsis": " ",
        "videoUrl": "https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/03/21/ae867c905c8c40dfbf4441b20aa43d48.mp4,https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/04/video/nongyesizheng01.mp4,https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/04/video/nongyesizheng02.mp4"
      },
      {
        "id": 209,
        "productName": "VR调酒",
        "lookNumber": 39,
        "collectNumber": 0,
        "grade": "4.8",
        "showImgUrl": "https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/03/16/55bfc305a87a43ae8b4eabb9ebe6b734jpg",
        "productSynopsis": "",
        "videoUrl": "https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/03/16/tiaojiu.mp4,https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/04/video/tiaojiu.mp4"
      },
      {
        "id": 204,
        "productName": "VR客房",
        "lookNumber": 21,
        "collectNumber": 0,
        "grade": "4.8",
        "showImgUrl": "http://192.168.0.145:9292/resource/resource/2022/05/23/2cdb68f2-43ec-4717-a999-f635f5ca03e7.jpg",
        "productSynopsis": "",
        "videoUrl": "https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/03/15/83d94f13817c43ba8a2f8b4b3d4924a1.mp4,https://lc-vrbox.oss-cn-beijing.aliyuncs.com/2022/04/video/kefang.mp4"
      }
    ]);
    //了解详情
    const findDetails = (value) => {
      console.log("了解详情++",toRaw(value).id)
      localStorage.setItem("aaa","2")
      router.push({
        path: '/scan/comm/details/experimentalDetails',
        query: {
          id: JSON.stringify(toRaw(value).id)
        }
      })
    }


    const getListDate = () => {
      homeRecommendation({}).then((response)=>{
        respnseData.value = response.data
      })
    }
    getListDate()
    return {
      imgSrc,
      projectImg,
      respnseData,
      findDetails,
    }
  }

}
</script>

<style scoped>
.mainClass {
  width: 100%;
  float: left;
}

/*.oneClass {*/
/*  background-color: aquamarine;*/
/*  width: 100%;*/
/*}*/
.CardClass {
  width: 80%;
  margin-left: 10%;
  height: 500px;
  background-color: #f8f9fd;
  margin-top: 5%;
}

.imgCardClass {
  width: 50%;
  height: 100%;
  float: left;
}
.imgCardClassRight {
  width: 50%;
  height: 100%;
  float: right;
}

.textCardClass {
  width: 45%;
  height: 100%;
  float: right;
}

.buttonClass {
  /*background-color: #3498db;*/
  margin-left: 30%;
  margin-top: 10%;
  font-size: 25px;
  width: 40%;
  height: 15%;
  border-radius: 15px;
  /*color: white;*/
}

.spanClass {
  font-size: 25px;
  margin-top: 10%;
}
.spanClass1{
  font-size: 17px;
  width: 100%;
  height: 30%;
  margin-top: 2%;
}

</style>
